<template>
  <view class="page bg-blue" >
    <cu-custom
      :isBack="true"
      :bgColor="showBg ? 'bg-coutom': ''"
    >
      <block slot="backText">返回</block>
      <block slot="content">品牌专区</block>
    </cu-custom>
    <!-- <view class="statusBar"></view> -->
    <image class="bg seckill-image" mode="widthFix" src="../../static/images/brandBg.png" />
    <image class="bt" mode="widthFix" src="../../static/images/brandTitle.png" />
    <view class="contant">
      <view v-for="item in brandLists" :key="item.id">
        <image
          class="zoonTopImg margin-bottom-sm"
          mode="widthFix"
          :src="item.detailPicUrl"
        />
        <div-goods-row v-model="item.goodsSpuList"></div-goods-row>
      </view>
    </view>
  </view>
</template>
<script>
const app = getApp();
import api from "utils/api";
import divGoodsRow from "../../component/goodsRow/index.vue";
export default {
  components: {
    divGoodsRow,
  },

  data() {
    return {
      theme: app.globalData.theme, //全局颜色变量
      brandLists:[],
      showBg:false
    };
  },

  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    app.initPage().then((res) => {
      this.getBrandGoodsAll()
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  onPageScroll(e) {
    if (e.scrollTop > 20) {
      this.showBg = true;
    } else {
      this.showBg = false;
    }
  },
  methods: {
    back(){
      uni.navigateBack()
    },
    async getBrandGoodsAll(){
      try {
       let {data} = await api.getBrandGoodsAll()
       this.brandLists = data
      } catch (err) {
        console.log(`err`, err)
      }
    }
  },
};
</script>
<style scoped>
.bg {
  width: 100%;
}
.bt {
  width: 454rpx;
  margin: 60rpx auto;
  display: block;
}
.back{
  position: fixed;
  z-index: 9;
  top: 50rpx;
  left: 20rpx;
}
.zoonTopImg {
  width: 100%;
  border-radius: 6px;
}
.contant {
  width: 690rpx;
  margin: 0 auto;
}
.statusBar {
  height: var(--status-bar-height);
}
.page {
  background: linear-gradient(180deg, #fee5c9 0%, #c19a72 100%);
  min-height: 100vh;
}
.seckill-image{
  margin-top: -120rpx;
}
.bg-coutom{
  background: #D6B390;
}
</style>